function drawTop(data, roomInfo) {
    //根据房间信息统计当前各个类型的房间总数
    var roomCountNumber = roomInfo.length;
    var roomKongFang = 0;
    var roomZaiZhu = 0;
    var roomYuDing = 0;
    var roomZangFang = 0;
    var roomWeiHu = 0;
    for (var i = 0, item; i < roomInfo.length; i++) {
        item = roomInfo[i];
        if (item.rstid == 1) {
            roomKongFang += 1;
        } else if (item.rstid == 2) {
            roomZaiZhu += 1;
        } else if (item.rstid == 3) {
            roomYuDing += 1;
        } else if (item.rstid == 4) {
            roomZangFang += 1;
        } else if (item.rstid == 5) {
            roomWeiHu += 1;
        }
    }

    var htmls = [];
    //总房间数量
    var roomcount = roomCountNumber;
    for (var i = 0; i < data.length; i++) {
        if (data[i].id == 1) {
            data[i].counts = roomKongFang;
        } else if (data[i].id == 2) {
            data[i].counts = roomZaiZhu;
        } else if (data[i].id == 3) {
            data[i].counts = roomYuDing;
        } else if (data[i].id == 4) {
            data[i].counts = roomZangFang;
        } else if (data[i].id == 5) {
            data[i].counts = roomWeiHu;
        }
    }
    htmls.push('<div class="layui-col-sm6 layui-col-md2 layui-col-lg2">\n' +
        '            <div class="layui-card" style="background-color:#488b8f">\n' +
        '                <div class="layui-card-header">\n' +
        '                    全部\n' +
        '                </div>\n' +
        '                <div class="layui-card-body layuiadmin-card-list">\n' +
        '                    <p style="font-size: 60px;text-align: center;">' + roomcount + '</p>\n' +
        '                    <p>&nbsp;\n' +
        '                        <span class="layuiadmin-span-color">/ 间</span>\n' +
        '                    </p>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '        </div>');
    //各个类型的房间数量
    for (var i = 0; i < data.length; i++) {
        var count = 0;
        if (data[i].hasOwnProperty("counts")) {
            count = data[i].counts;
        }
        htmls.push(' <div class="layui-col-sm6 layui-col-md2 layui-col-lg2">\n' +
            '            <div class="layui-card" style="background-color: ' + data[i].color + '">\n' +
            '                <div class="layui-card-header">\n' +
            '                    ' + data[i].name + '\n' +
            '                </div>\n' +
            '                <div class="layui-card-body layuiadmin-card-list">\n' +
            '                    <p style="font-size: 60px;text-align: center;">' + count + '</p>\n' +
            '                    <p>&nbsp;\n' +
            '                        <span class="layuiadmin-span-color">/ 间</span>\n' +
            '                    </p>\n' +
            '                </div>\n' +
            '            </div>\n' +
            '        </div>');
    }
    $("#topInfo").html(htmls);
}

function drawMain(data) {
    //声明一个数组用于存储楼层
    var floors = [];
    for (var i = 0; i < data.length; i++) {
        if (!floors.includes(data[i].rtfloors)) {
            floors.push(data[i].rtfloors);
        }
    }
    //排序
    floors.sort(function sortNumber(a, b) {
        return a - b
    });
    htmls = "";
    //循环楼层外div
    for (var i = 0, item; i < floors.length; i++) {
        htmls += '<div class="layui-row layui-col-lg12 layui-elem-quote layui-quote-nm">'
        htmls += '<div class="layui-col-lg1 layui-col-md1 layui-col-lg1 floorTop">\n' +
            '           <div class="layui-card">\n' +
            '               <div>' + floors[i] + '</div>\n' +
            '               <div>楼</div>\n' +
            '           </div>\n' +
            '        </div>'
        htmls += '<div class="layui-col-lg11 layui-col-md11 layui-col-lg11">'
        for (var j = 0, item; j < data.length; j++) {
            if (data[j].rtfloors == floors[i]) {
                var btnY = '<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-primary "\n' +
                    'data-t="tabResever" onclick="repeaterClick(this)">预</button>\n'
                var btnR = '<button class="layui-btn layuiadmin-btn-role layui-btn-xs layui-btn-radius layui-btn-primary "\n' +
                    'data-t="tabAdd" onclick="repeaterClick(this)">入</button>\n'
                var btnD = '<button class="layui-btn layuiadmin-btn-role layui-btn-xs layui-btn-radius layui-btn-primary "\n' +
                    'data-t="tabArrive" onclick="repeaterClick(this)">到</button>\n'
                var btnZ = '<button class="layui-btn layuiadmin-btn-role layui-btn-xs layui-btn-radius layui-btn-primary "\n' +
                    'data-t="tabChange" onclick="repeaterClick(this)">转</button>\n'
                var btnT = '<button class="layui-btn layuiadmin-btn-role layui-btn-xs layui-btn-radius layui-btn-primary "\n' +
                    'data-t="tabExit" onclick="repeaterClick(this)">退</button>\n'
                var btnC = '<button class="layui-btn layuiadmin-btn-role layui-btn-xs layui-btn-radius layui-btn-primary "\n' +
                    'data-t="tabExpedite" onclick="repeaterClick(this)">务</button>\n'
                var temp = "";
                //判断按钮
                if (data[j].rstid == 1) {
                    temp += btnY;
                    temp += btnR
                } else if (data[j].rstid == 2) {
                    temp += btnZ;
                    temp += btnT
                } else if (data[j].rstid == 3) {
                    temp += btnD;
                    // temp += btnT
                } else if (data[j].rstid == 4) {
                    temp += btnC;
                } else if (data[j].rstid == 5) {
                    temp += btnC;
                }
                var tempName = "";
                if (typeof (data[j].realname) == "undefined") {
                    tempName = "&nbsp";
                } else {
                    tempName = data[j].realname;
                }
                if (data[j].quit == 1) {
                    data[j].rstname = "待退";
                }
                htmls += '<div class="layui-col-sm6 layui-col-md2 layui-col-lg2">\n' +
                    '           <div class="layui-card roomOne" style="background-color:' + data[j].color + ' ;">\n' +
                    '               <div class="layui-card-body layuiadmin-card-list">\n' +
                    '                    <div class="layui-row">\n' +
                    '                         <div class="layui-col-md6 roomStatus">' + data[j].rstname + '</div>\n' +
                    '                         <div class="layui-col-md6 roomNum">' + data[j].rname + '</div>\n' +
                    '                     </div>\n' +
                    '                     <div class="layui-row">\n' +
                    '                         <div class="layui-col-md5 roomType">' + data[j].rtname + '</div>\n' +
                    '                         <div class="layui-col-md7">\n' +
                    '                             <span class="roomTime">' + tempName + '</span>\n' +
                    '                             <div class="roomBtn" data-id="' + data[j].rid + '">' + temp + '</div>\n' +
                    '                          </div>\n' +
                    '                      </div>\n' +
                    '                  </div>\n' +
                    '              </div>\n' +
                    '          </div>'
                temp = "";
            }
        }
        htmls += '</div>';
        htmls += '</div>'
    }
    $("#mainInfo").html(htmls);
    //重新渲染页面元素
    layui.use('element', function () {
        var element = layui.element;
        element.init();
    });
}

//自动刷新
self.setInterval("AutoData()", 20000);

function AutoData() {
    $.ajax({
        url: '/room_status/findRoomInfo'
        , type: 'get'
        , dataType: 'json'
        , data: {"checkDate": $("#dateInfo").val()}
        , timeout: 5000
        , success: function (data) {
            nowData = data;
            drawTop(data.typeCounts, data.room);
            var dv = $("#roomStatus").val();
            var datas = [];
            // drawMain(datas);
            if (dv == "0") {
                drawMain(nowData.room);
            } else {
                for (var i = 0; i < nowData.room.length; i++) {
                    if (nowData.room[i].rstid == dv) {
                        datas.push(nowData.room[i]);
                    }
                }
                drawMain(datas);
            }
            changeSelect()
        }
        , error: function (textStatus) {
            layer.msg("获取数据错误");
        }
        , complete: function (XMLHttpRequest, status) {
            if (status == 'timeout') {
                XMLHttpRequest.abort();
                // 超时后中断请求
                layer.msg("连接超时");
            }
        }
    })
}

//格式化日期
function dateFormat(value) {
    if (null != value && "" != value) {
        var date = new Date(value);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        if (m < 10) {
            m = "0" + m;
        }
        var d = date.getDate();
        if (d < 10) {
            d = "0" + d;
        }
        return y + '-' + m + '-' + d;
    } else {
        return "";
    }
}